<template>
    <div>
        <div class="container">
            <div class="scrolling">
                <div class="storeWrap" v-for="val1 in storeWrap" :key="val1.id">
                    <div class="store">
                        <img :src="imgUrl+val1.arr1" class="shoreImg">
                        <div class="storeTxt">
                            <div class="storeTitle">
                                <h2>{{val1.storeTitle}}</h2>
                                <div class="collect">
                                    <span class="colIcon notAtten" @click="getAtten"></span>
                                </div>
                            </div>
                            <p class="time">{{val1.time}}</p>
                            <p class="sendMoney">{{val1.sendMoney}}</p>
                        </div>
                    </div>
                </div>
                <div class="searchBarWrap">
                    <div class="searchBar">
                        <div class="searchContent">
                            <div class="search">
                                <span class="searchIcon">搜索店内商品，共107件好物</span>
                            </div>
                            <span class="tickets" @click="getTicket"></span>
                        </div>
                    </div>
                </div>
                <div class="imgScrollWrap">
                    <div class="imgScroll">
                        <div class="imgItem" v-for="val2 in imgItem" :key="val2.id">
                            <img :src="imgUrl+val2.arr">
                        </div>
                    </div>
                    <div id="sliderWrap1"></div>
                </div>
                <div class="storeContent">
                    <ul class="leftNav">
                        <li :class="['leftNavLis',leftClass==index?'active':'']" v-for="(val3,index) in leftNav" :key="val3.id" @click="cutActive(val3.id,index,$event)">
                            {{val3.title}}
                            <div class="leftNavChild" v-show="leftNavChildShow==val3.id?true:false">
                                <ul class="leftChildUl">
                                    <div class="leftChildDiv" v-for="val4 in val3.children" :key="val4.id">
                                        <span v-for="val5 in val4.title" :key="val5.id">
                                            <li :class="['leftChildLi',topClass==index1?'active2':'']" @click="cutActive2(val6.id,index1)" v-for="(val6,index1) in val5" :key="val6.id">{{val6.tabTxt}}</li>
                                        </span>
                                    </div>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <div id="sliderWrap2"></div>
                    <div class="goodsWrap">
                        <div class="goods">
                            <div class="goodsTitle">
                                <div v-for="(val3,index) in leftNav" :key="val3.id">
                                    <div v-for="val4 in val3.children" :key="val4.id">
                                        <div class="title" v-for="val5 in val4.title" :key="val5.id">
                                            <span v-for="(val6,index1) in val5" :key="val6.id" v-show="leftNavChildShow==val3.id?goodsTitleShow==index1?true:false:false">{{val6.tabTxt}}
                                                <span v-show="goodShow==0?false:cheShowL==4?false:true">({{val6.nums}})</span>
                                            </span>
                                        </div>
                                        <div class="title" v-show="goodShow==index?goodShow==0?true:false:false">为你优选(11)</div>
                                        <div class="title" v-show="cheShowL==index?cheShowL==4?true:false:false">车厘子(5)</div>
                                    </div>
                                </div>
                                <div class="msg">
                                    <span class="salVolume msgs">销量</span>
                                    <span class="price msgs">价格
                                        <span class="picon"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="goodsContent">
                                <ul class="rightNav">
                                    <div v-for="(val3,index) in leftNav" :key="val3.id" :class="'scrollBox'+index">
                                        <div class="rightChildDiv" v-for="val4 in val3.children" :key="val4.id">
                                            <div v-for="val5 in val4.title" :key="val5.id">
                                                <div v-for="(val6,index1) in val5" :key="val6.id">
                                                    <li class="rightNavLis" v-for="val7 in val6.arr" :key="val7.id" v-show="rightNavChildShow==index1+''?true:rightNavChildShow==val6.id?true:false">
                                                        <router-link :to='"/goods/"+shop_id+"/"+val3.title+"/"+val7[0].id' class="liContent">
                                                            <span class="liContentImg">
                                                                <img :src="imgUrl+val7[0].img">
                                                            </span>
                                                            <dl class="goodsDetails">
                                                                <dt>{{val7[0].title}}</dt>
                                                                <dd class="speed">{{val7[0].speed}}</dd>
                                                                <dd class="saleNum">
                                                                    <span class="sales">月售{{val7[0].sales}}件</span>
                                                                    <span class="good">好评{{val7[0].good}}%</span>
                                                                </dd>
                                                                <dd class="priceLine"></dd>
                                                                <dd class="priceWrap">
                                                                    <label>￥{{val7[0].price}}</label>
                                                                </dd>
                                                            </dl>
                                                        </router-link>
                                                        <div class="numsChange">
                                                            <span v-for="val8 in cars[shop_id]" :key="val8.id">
                                                                <span class="reduce numsChangeBtn" @click="red(val8)" v-show="val8.id==val7[0].id"></span>
                                                                <label class="goodsNum" v-show="val8.id==val7[0].id">{{val8.num}}</label>
                                                            </span>
                                                            <span class="add numsChangeBtn" @click="add(val7[0]);redPoint($event)"></span>
                                                        </div>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ticketWrap" v-show="maskShow">
                <div class="mask" @click="closeTicket"></div>
                <div class="ticketBox">
                    <div class="ticketTitle">优惠券
                        <div class="closeBtn" @click="closeTicket"></div>
                    </div>
                    <div class="ticketBody">
                        <div class="ticketItem">
                            <div class="itemsWrap">
                                <div class="items">
                                    <div class="leftPar">
                                        <div class="left">10
                                            <span>元</span>
                                        </div>
                                        <div class="middle">
                                            <div class="midTxt">
                                                <div class="aqw">满110元可用</div>
                                                <div class="aqx">关注后领取该粉丝券</div>
                                                <div class="aqx">2018.12.26-2019.01.02</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rightPar">
                                        <div class="rightTxt">
                                            <div class="bg"></div>
                                            <div class="lq" @click="alertShow=true">{{lq}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="errorDialog success">
                            <span class="toast">优惠券领取成功</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="attLqWrap" v-show="alertShow">
                <div class="alert">
                    <h2>提示</h2>
                    <div class="g">关注店铺才可领取粉丝券!</div>
                    <div class="gBtn">
                        <div class="cancel gBtns" @click="alertShow=false">取消</div>
                        <div class="atten gBtns" @click="attenEvent">关注并领取</div>
                    </div>
                </div>
            </div>
            <div class="errorDialog attention">
                <span class="toast">
                    <div class="collect attCollect">
                        <span class="colIcon notAtten" @click="getAtten"></span>
                    </div>
                    {{successAtten}}
                </span>
            </div>
            <div id="ttt" class="d-target"></div>
            <Nav></Nav>
            <ShopCarFooter :shopId='shop_id'></ShopCarFooter>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import ShopCarFooter from '@/components/ShopCarFooter'
import Nav from '@/components/Nav'
export default {
    props:['shop_id'],
    data(){
        return {
            maskShow:false,
            alertShow:false,
            lq:'领券',
            url:require('../images/details/store_conpon_status.png'),
            successAtten:'已取消关注',
            storeWrap:[],
            imgItem:[],
            leftNav:[],
            leftNavChildShow:'0',
            rightNavChildShow:0,
            goodsTitleShow:0,
            leftClass:0,
            topClass:0,
            goodShow:0,
            cheShowL:0,
        }
    },
    created(){
        //购物车初始化
        if(!this.cars[this.shop_id]){
            this.$set(this.cars,this.shop_id,{});
            this.$set(this.checkIdArr2,this.shop_id,[]);
            this.$set(this.cars[this.shop_id],'carNum',0);
        }
        this.getStoreWrap();
        this.getImgItem();
        this.getLeftNav();
    },
    mounted(){
        $('.goodsWrap')[0].addEventListener('scroll', this.scrollCutTab, true);
    },
    computed:{
        outerWrapper(){
            var outerWrapper = document.createElement('div');
            var outer = null;
            var inner = null;
            outer = document.createElement('div');
            outer.classList.add('outer');
            outer.classList.add('point-pre');
            inner = document.createElement('div');
            inner.setAttribute('class', 'inner');
            outer.appendChild(inner);
            outerWrapper.appendChild(outer);
            inner = null;
            outer = null;
            document.getElementsByClassName('container')[0].appendChild(outerWrapper);
            return outerWrapper;
        },
    },
    methods:{
        cutActive(id,index,e){
            $('.goodsWrap').scrollTop(0);
            this.leftNavChildShow=id;
            this.leftClass=index;
            this.goodShow=index;
            this.cheShowL=index;
            if(index==0||index==4){
                $('.goodsWrap').removeClass('goodsWrap1')
            }else{
                $('.goodsWrap').addClass('goodsWrap1')
            }
            $($(e.target).find('.leftChildLi')[0]).click();
        },
        cutActive2(id,index){
            this.topClass=index;
            this.goodsTitleShow=index;
            this.rightNavChildShow=id;
        },
        getTicket(){
            this.maskShow=true;
            $('.ticketBox').animate({bottom:0},600);
        },
        closeTicket(){
            $('.ticketBox').animate({bottom:-1065},600);
            setTimeout(()=>{
                this.maskShow=false;
            },600);
        },
        attenEvent(){
            this.alertShow=false;
            this.lq='已领取';
            $('.lq').css({
                backgroundColor:'#cdcdcd',
                color:'#fff'
            })
            $('.rightTxt .bg').css('backgroundImage','url('+this.url+')')
            $('.colIcon').removeClass('notAtten').addClass('hasAtten');
            setTimeout(()=>{
                $('.success .toast').css('opacity','1');
                setTimeout(()=>{
                    $('.success .toast').css('opacity','0');
                },2000);
            },100);
        },
        getAtten(){
            if($('.colIcon').hasClass('notAtten')){
                $('.colIcon').removeClass('notAtten').addClass('hasAtten');
                this.successAtten='关注成功';
                $('.attention').css('display','block');
                setTimeout(()=>{
                    $('.attention .toast').css('opacity','1');
                    setTimeout(()=>{
                        $('.attention .toast').css('opacity','0');
                        setTimeout(()=>{
                            $('.attention').css('display','none');
                        },500)
                    },2000);
                },100);
            }else{
                $('.colIcon').removeClass('hasAtten').addClass('notAtten');
                this.successAtten='已取消关注';
                $('.attention').css('display','block');
                setTimeout(()=>{
                    $('.attention .toast').css('opacity','1');
                    setTimeout(()=>{
                        $('.attention .toast').css('opacity','0');
                        setTimeout(()=>{
                            $('.attention').css('display','none');
                        },500)
                    },2000);
                },100);
            }
        },
        getStoreWrap(){
            this.axios.get('/storewrap').then((ret)=>{
                let {data,error}=ret.data;
                this.storeWrap=data;
            }).catch(()=>{})
        },
        getImgItem(){
            this.axios.get('/imgItem').then((ret)=>{
                let {data,error}=ret.data;
                this.imgItem=data;
            }).catch(()=>{})
        },
        getLeftNav(){
            this.axios.get('/leftnav').then((ret)=>{
                let {data,error}=ret.data;
                this.leftNav=data;
            }).catch(()=>{})
        },
        add(goods,event){
            if(!this.cars[this.shop_id][goods.id]){
                this.$set(this.cars[this.shop_id],goods.id,goods);
                let index = this.checkIdArr2[this.shop_id].indexOf(goods);
                if (index==-1) {
                    this.checkIdArr2[this.shop_id].push(goods);
                }
            }
            if(!this.cars[this.shop_id][goods.id].num){
                this.$set(this.cars[this.shop_id][goods.id],'num',1);
            }else{
                this.cars[this.shop_id][goods.id].num++;
            }
            $('.shopCar').addClass('pulse');
            setTimeout(()=>{
                $('.shopCar').removeClass('pulse')
            },220);
        },
        red(goods){
            this.cars[this.shop_id][goods.id].num--;
            if(this.cars[this.shop_id][goods.id].num==0){
                this.$delete(this.cars[this.shop_id],goods.id)
                let index = this.checkIdArr2[this.shop_id].indexOf(goods);
                this.checkIdArr2[this.shop_id].splice(index,1);
            }
        },
        redPoint(event){
            var left = event.pageX;
            var top = event.pageY;
            // 定位球元素
            var childElement = this.outerWrapper.getElementsByClassName('point-pre')[0];
            childElement.style.left = left + 'px';
            childElement.style.top = top + 'px';
            // 计算坐标差
            var endLeft=document.getElementById('ttt').offsetLeft;
            var endTop=document.getElementById('ttt').offsetTop;
            var leftDifference = -(left - endLeft);
            var topDifference = -(top - endTop-$(document).scrollTop());
            // 开始
            childElement.classList.remove('point-pre');
            setTimeout(function () {
                childElement.getElementsByClassName('inner')[0].style.transform = `translateY(${topDifference}px)`;
                childElement.style.transform = `translateX(${leftDifference}px)`;
                setTimeout(function () {
                    childElement.getElementsByClassName('inner')[0].setAttribute('style', '');
                    childElement.setAttribute('style', '');
                    childElement.classList.add('point-pre');
                }, 350);
            }, 1);
        },
        scrollCutTab(){
            let scrollTop =$('.goodsWrap').scrollTop();
            let _index=$('.leftNavLis').map((index,val)=>{
                if($(val).hasClass('active')){
                    return index;
                }   
            })[0];
            let rid=Math.round(parseInt($('.scrollBox'+_index).css('height'))-scrollTop);
                if(rid==908||rid==992){
                    let _index=$('.leftNavLis').map((index,val)=>{
                        if($(val).hasClass('active')){
                            $(val).removeClass('active');
                            return index;
                        }
                        if(index==6){
                            return index;
                        }
                    })[0];
                    $($('.leftNavLis')[_index+1]).addClass('active').click();
                    this.oTop1=0;
                }
        }
    },
    components:{
        ShopCarFooter,
        Nav
    }
}
</script>

<style scoped lang='scss'>
.container {
    .scrolling {
        .storeWrap {
            padding-top: 18px;
            box-sizing: border-box;
            background-color: #fff;
            .store {
                position: relative;
                color: #333;
                padding: 4px 23px 5px 23px;
                box-sizing: border-box;
                .shoreImg {
                    position: absolute;
                    width: 159px;
                    height: 159px;
                    border-radius: 46px 9px 46px 9px;
                    box-shadow: 0px 0px 46px 0px rgba(0, 0, 0, 0.08);
                    border: 0;
                }
                .storeTxt {
                    padding-left: 182px;
                    line-height: 46px;
                    min-height: 163px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 35px;
                    .storeTitle {
                        margin-right: 70px;
                        h2 {
                            margin: 0;
                            float: left;
                            width: 100%;
                            line-height: 50px;
                            font-size: 42px;
                            font-weight: bold;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            margin-bottom: 21px;
                        }
                    }
                    p {
                        margin: 0;
                        position: relative;
                        line-height: 35px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-bottom: 35px;
                        font-size: 28px;
                        padding-right: 159px;
                    }
                    .time {
                        margin-bottom: 21px;
                    }
                }
            }
        }
        .searchBarWrap {
            display: flex;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 12;
            .searchBar {
                flex: 1;
                overflow: hidden;
                .searchContent {
                    position: sticky;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 12;
                    height: 93px;
                    background: #fff;
                    padding: 11px 23px 23px 23px;
                    box-sizing: border-box;
                    color: #555;
                    font-size: 39px;
                    text-align: center;
                    line-height: 103px;
                    display: flex;
                    .search {
                        height: 70px;
                        line-height: 48px;
                        text-align: left;
                        overflow: hidden;
                        position: relative;
                        background: #F4F4F4;
                        border-radius: 70px;
                        display: flex;
                        flex: 1;
                        .searchIcon {
                            font-size: 33px;
                            color: #999;
                            text-align: center;
                            background: url(/static/details/search_bar_sprites.png) no-repeat;
                            background-position: -11px -16px;
                            background-size: 103px auto;
                            padding: 0 23px 0 63px;
                            line-height: 70px;
                        }
                    }
                    .tickets {
                        display: block;
                        background: url(/static/details/groupCopy.png) no-repeat;
                        background-size: 103px auto;
                        height: 70px;
                        width: 110px;
                        background-position: 14px;
                    }
                }
            }
        }
        .imgScrollWrap {
            background-color: #fff;
            position: relative;
            .imgScroll {
                position: relative;
                white-space: nowrap;
                overflow: auto;
                padding: 0 23px 23px 23px;
                .imgItem {
                    width: calc(100% - 32px);
                    height: calc((100% - 32px)*91/341);
                    position: relative;
                    display: inline-block;
                    margin-right: 23px;
                    img {
                        display: block;
                        width: 100%;
                        background-color: #f4f4f4;
                        border-radius: 9px;
                    }
                }
            }
            #sliderWrap1 {
                height: 20px;
                width: 750px;
                background-color: rgb(255, 255, 255);
                position: absolute;
                left: 0;
                top: 230px;
                z-index: 100;
            }
        }
        .storeContent {
            height: 1132px;
            box-sizing: border-box;
            background-color: #fff;
            overflow: hidden;
            display: flex;
            position: relative;
            .leftNav {
                margin: 0;
                padding: 0;
                width: 187px;
                height: 830px;
                padding-bottom: 187px;
                overflow-y: scroll;
                overflow-x: hidden;
                background-color: #fafafa; // position: relative;
                li {
                    width: auto;
                    height: 107px;
                    padding: 4px 28px;
                    line-height: 48px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 32px;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    -webkit-box-pack: center;
                    display: flex;
                    align-items: center;
                    color: #666;
                    .leftNavChild {
                        width: 562px;
                        position: absolute;
                        right: 0;
                        top: 0px;
                        overflow-x: auto;
                        .leftChildUl {
                            margin: 0;
                            padding: 0;
                            margin-left: 23px;
                            overflow-x: scroll;
                            .leftChildDiv {
                                width: 1200px;
                                overflow-x: auto;
                                display: inline-block;
                                .leftChildLi {
                                    margin: 0;
                                    padding: 0;
                                    background: #fff;
                                    display: inline-block;
                                    margin-right: 32px;
                                    height: 84px;
                                    line-height: 84px;
                                    font-size: 34px;
                                    font-weight: normal;
                                    color: #666;
                                }
                                .active2 {
                                    color: #47B34F;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
                .active {
                    color: #333;
                    font-weight: bold;
                    background: #fff;
                }
            }
            #sliderWrap2 {
                height: 100%;
                width: 15px;
                background-color: rgb(255, 255, 255);
                position: absolute;
                left: 172px;
                top: 0;
                z-index: 100;
            }
            .goodsWrap {
                flex: 1; // padding-bottom: 117px;
                box-sizing: border-box;
                position: relative;
                overflow-y: scroll;
                display: flex;
                .goods {
                    clear: both;
                    background-color: #fff;
                    flex: 1;
                    .goodsTitle {
                        position: sticky;
                        top: -2px;
                        z-index: 10;
                        background: #fff;
                        display: flex;
                        justify-content: space-between;
                        .title {
                            flex: 1;
                            font-size: 28px;
                            line-height: 70px;
                            color: #666;
                            padding-left: 23px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            position: absolute;
                            left: 0;
                        }
                        .msg {
                            font-size: 28px;
                            line-height: 70px;
                            color: #666;
                            display: flex;
                            .msgs {
                                display: block;
                                padding: 0 16px;
                            }
                            .price {
                                .picon {
                                    background: url(/static/details/normal_price.png) no-repeat;
                                    background-size: 16px;
                                    height: 23px;
                                    width: 16px;
                                    display: inline-block;
                                }
                            }
                        }
                    }
                    .goodsContent {
                        touch-action: none;
                        overflow: hidden;
                        box-sizing: border-box;
                        flex: 1;
                        min-height: 1060px;
                        transform: translate(0, 0) translateZ(0);
                        position: relative;
                        .rightNav {
                            margin: 0;
                            padding: 0;
                            min-height: 1050px;
                            padding-bottom: 70px;
                            box-sizing: border-box;
                            .rightNavLis {
                                margin: 0;
                                padding: 0;
                                position: relative;
                                padding-left: 23px;
                                list-style-type: none;
                                .liContent {
                                    display: block;
                                    text-decoration: none;
                                    overflow: hidden;
                                    padding: 35px 23px 35px 0;
                                    color: #555;
                                    .liContentImg {
                                        display: block;
                                        position: relative;
                                        float: left;
                                        margin-top: 4px;
                                        border-radius: 9px;
                                        overflow: hidden;
                                        img {
                                            width: 257px;
                                            height: 257px;
                                        }
                                    }
                                    .goodsDetails {
                                        margin: 0;
                                        margin-left: 269px;
                                        dt {
                                            margin: 0;
                                            padding: 0;
                                            font-size: 38px;
                                            font-weight: bold;
                                            color: #333;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            padding-left: 11px;
                                            max-height: 97px;
                                            line-height: 46px;
                                            -webkit-line-clamp: 2;
                                            -webkit-box-orient: vertical;
                                            display: -webkit-box;
                                            word-break: break-all;
                                        }
                                        .speed {
                                            margin: 0;
                                            padding: 0;
                                            padding-top: 11px;
                                            font-size: 26px;
                                            max-height: 33px;
                                            line-height: 33px;
                                            -webkit-line-clamp: 1;
                                            -webkit-box-orient: vertical;
                                            display: -webkit-box;
                                            padding-left: 11px;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            color: #666;
                                        }
                                        .saleNum {
                                            margin: 0;
                                            padding: 0;
                                            padding-top: 11px;
                                            padding-left: 11px;
                                            overflow: hidden;
                                            color: #666;
                                            .sales {
                                                display: inline-block;
                                                font-size: 26px;
                                                line-height: 33px;
                                            }
                                            .good {
                                                display: inline-block;
                                                font-size: 26px;
                                                line-height: 33px;
                                            }
                                        }
                                        .priceLine {
                                            margin: 0;
                                            padding: 0;
                                            padding-left: 11px;
                                            overflow: hidden;
                                            padding-top: 11px;
                                        }
                                        .priceWrap {
                                            margin: 0;
                                            padding: 11px 0 70px 0;
                                            overflow: hidden;
                                            label {
                                                font-size: 42px;
                                                line-height: 50px;
                                                display: block;
                                                color: #ff3434;
                                                white-space: nowrap;
                                            }
                                        }
                                    }
                                    &::after {
                                        height: 2px;
                                        content: '';
                                        width: 100%;
                                        border-bottom: 2px solid #f5f5f5;
                                        position: absolute;
                                        left: 23px;
                                        bottom: 0;
                                    }
                                }
                                .numsChange {
                                    position: absolute;
                                    right: 0;
                                    bottom: 124px;
                                    display: inline-block;
                                    .numsChangeBtn {
                                        display: inline-block;
                                        position: absolute;
                                        padding: 23px;
                                        text-indent: -9999px;
                                        background: url(/static/details/addNumSprite.png) no-repeat;
                                        background-color: transparent;
                                        background-size: 400% 100%;
                                        width: 65px;
                                        height: 65px;
                                        vertical-align: top;
                                        border: 0;
                                        background-origin: content-box;
                                    }
                                    .reduce {
                                        right: 134px;
                                        background-position: -97px 0;
                                    }
                                    .add {
                                        right: 0;
                                        background-position: 0 0;
                                    }
                                    .goodsNum {
                                        display: inline-block;
                                        position: absolute;
                                        right: 88px;
                                        margin-top: 23px;
                                        color: #666;
                                        font-size: 37px;
                                        padding: 0;
                                        width: 70px;
                                        height: 65px;
                                        overflow: hidden;
                                        text-align: center;
                                        line-height: 65px;
                                        vertical-align: top;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .goodsWrap1 {
                margin-top: 84px;
            }
        }
    }
    .ticketWrap {
        position: fixed;
        left: 0;
        top: 0;
        width: 750px;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 2002;
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 750px;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }
        .ticketBox {
            position: absolute;
            bottom: -1065px;
            left: 0;
            width: 100%;
            height: 80%;
            background: #fff;
            border-radius: 23px 23px 0 0;
            color: #333;
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
            .ticketTitle {
                text-align: center;
                margin: 30px 0;
                font-size: 37px;
                line-height: 50px;
                font-weight: 600;
                position: relative;
                .closeBtn {
                    position: absolute;
                    width: 52px;
                    height: 52px;
                    top: 0;
                    right: 21px;
                    padding: 7px;
                    box-sizing: border-box;
                    background: url(/static/details/popup_close.png) no-repeat;
                    background-size: cover;
                    background-origin: content-box;
                }
            }
            .ticketBody {
                flex: 1;
                .ticketItem {
                    background: #fff;
                    border-bottom-left-radius: 23px;
                    border-bottom-right-radius: 23px;
                    .itemsWrap {
                        margin: 0 23px;
                        .items {
                            margin-bottom: 35px;
                            position: relative;
                            height: 163px;
                            border-radius: 11px;
                            overflow: hidden;
                            border-left: 7px solid #ff5757;
                            box-sizing: border-box;
                            .leftPar {
                                float: left;
                                height: 100%;
                                width: 100%;
                                .left {
                                    width: 140px;
                                    float: left;
                                    height: 163px;
                                    text-align: center;
                                    background: #fffbfb;
                                    border-top: 3px solid #ff9d9d;
                                    border-bottom: 3px solid #ff9d9d;
                                    box-sizing: border-box;
                                    color: #ff4f64;
                                    font-size: 46px;
                                    line-height: 163px;
                                    span {
                                        font-size: 35px;
                                    }
                                }
                                .middle {
                                    margin-left: 140px;
                                    margin-right: 165px;
                                    height: 163px;
                                    background: #fffbfb;
                                    border-top: 3px solid #ff9d9d;
                                    border-bottom: 3px solid #ff9d9d;
                                    box-sizing: border-box;
                                    position: relative;
                                    .midTxt {
                                        position: absolute;
                                        left: 14px;
                                        right: 0;
                                        top: 14px;
                                        text-align: left;
                                        .aqw {
                                            color: #333;
                                            font-size: 35px;
                                            margin-bottom: 15px;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            white-space: nowrap;
                                        }
                                        .aqx {
                                            margin-bottom: 13px;
                                            color: #666;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            white-space: nowrap;
                                            font-size: 25px;
                                        }
                                    }
                                }
                            }
                            .rightPar {
                                float: left;
                                position: relative;
                                width: 140px;
                                height: 163px;
                                margin-left: -163px;
                                background-position: 0 0;
                                background-repeat: no-repeat;
                                background-size: 23px 100%;
                                padding-left: 23px;
                                background-image: url(/static/details/store_act_new_conpon.png);
                                .rightTxt {
                                    width: 100%;
                                    height: 100%;
                                    border-top: 1px solid #FFF;
                                    border-top-right-radius: 11px;
                                    border-bottom-right-radius: 11px;
                                    border-top-left-radius: 3px;
                                    border-bottom-right-radius: 3px;
                                    background-color: #fffbfb;
                                    border: 3px solid #ff9d9d;
                                    border-left: none;
                                    box-sizing: border-box;
                                    position: relative;
                                    .bg {
                                        background-image: url();
                                        background-position: center -42px;
                                        position: absolute;
                                        width: 132px;
                                        height: 88px;
                                        top: -4px;
                                        right: 9px;
                                        background-repeat: no-repeat;
                                        background-size: 132px auto;
                                    }
                                    .lq {
                                        position: relative;
                                        width: 117px;
                                        height: 46px;
                                        font-size: 30px;
                                        color: #fefffe;
                                        text-align: center;
                                        line-height: 46px;
                                        margin: 56px auto 0;
                                        background-color: #ff5757;
                                        border-radius: 46px;
                                    }
                                }
                            }
                        }
                    }
                }
                .success {
                    position: relative;
                    z-index: 3001;
                    .toast {
                        opacity: 0;
                    }
                }
            }
        }
    }
    .attLqWrap {
        position: fixed;
        z-index: 2003;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 750px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        .alert {
            z-index: 3000;
            position: relative;
            width: 632px;
            color: #000;
            font-size: 32px;
            line-height: 44px;
            border-radius: 18px;
            background-color: #fff;
            overflow: hidden;
            text-align: center;
            left: 59px;
            top: 40%;
            h2 {
                margin: 0;
                padding: 0;
                font-size: 40px;
                color: #000;
                font-family: "黑体 Arial";
                font-weight: bold;
                height: 140px;
                line-height: 140px;
                background-color: #fff;
            }
            .g {
                line-height: 44px;
                padding: 0 77px 50px 77px;
            }
            .gBtn {
                position: relative;
                height: 103px;
                line-height: 103px;
                font-size: 40px;
                color: #47b34f;
                border-radius: 0 0 21px 21px;
                display: flex;
                .gBtns {
                    font-size: 35px;
                    height: 103px;
                    width: 50%;
                    border-top: 2px solid #d9d9d9;
                }
                .cancel {
                    border-right: 2px solid #d9d9d9;
                    color: #999;
                }
            }
        }
    }
    .collect {
        position: absolute;
        top: -2px;
        right: 23px;
        font-size: 28px;
        color: #fff;
        text-align: right;
        width: 70px;
        height: 70px;
        padding-left: 23px;
        .colIcon {
            display: block;
            width: 70px;
            height: 70px;
            background-image: url(/static/details/focus.png);
            background-repeat: no-repeat;
            background-size: 159px auto;
        }
        .hasAtten {
            background-position: 7px -88px;
        }
        .notAtten {
            background-position: 7px 9px;
        }
    }
    .errorDialog {
        padding: 23px 35px;
        color: #fff;
        text-align: center;
        .toast {
            background: #2b2b2b;
            padding: 23px 35px;
            display: inline-table;
            text-align: left;
            border-radius: 7px;
            font-size: 28px;
            line-height: 1.5;
            transition: all 0.5s ease;
        }
    }
    .attention {
        display: none;
        width: 750px;
        position: absolute;
        top: 70%;
        z-index: 3001;
        box-sizing: border-box;
        .toast {
            opacity: 0;
            text-align: center;
            .attCollect {
                position: static;
                padding: 0;
                margin: auto;
                .notAtten {
                    background-position: -87px 9px;
                }
            }
        }
    }
}
</style>
